<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="../js/xyz.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body onload="showData(),showData2()">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="margin-left: 30px;width: 98%;margin-top: 30px;" >
<div id="main" style="width: 600px;height:400px;margin-left: 40px" class="tu1"></div>
<div id="two" style="width: 600px;height:400px;margin-left: 50px" class="tu2"></div>
</div>
<style>
    .tu1 {
        float: left;
    }

    .tu2 {
        float: left;

    }
</style>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    function showData() {
        var jsonA;

        $.ajaxSettings.async = false;
        $.post("bingtuhuidiao","", function (dataA) {
            jsonA = dataA;

        },"json")
        $.ajaxSettings.async = true;

        option = {
            title: {
                text: '简历状态概览',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}  : {c} ({d}%)'
            },
            legend: {
                top: 'bottom'
            },
            toolbox: {
                itemSize:20,
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: true },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '不同简历状态的简历个数展示',
                    type: 'pie',
                    radius: [50, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: jsonA,
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    }

    function showData2() {
        var jsonA;

        $.ajaxSettings.async = false;
        $.post("bingtuhuidiao2","", function (dataA) {
            jsonA = dataA;
        },"json")
        $.ajaxSettings.async = true;

        option = {
            title: {
                text: '员工学历水平概览',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                top: 'bottom'
            },
            toolbox: {
                itemSize:20,
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: true,

                        lang: ["数据视图", "关闭", "刷新"]
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '不同学历水平的简历个数展示',
                    type: 'pie',
                    radius: [50, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: jsonA,
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        var myChart = echarts.init(document.getElementById('two'));
        myChart.setOption(option);
    }



</script>
</body>
</html>